<template>
    <div id="queryHead" class="main-container mt10">
        <div>
            <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
                <table>
                    <caption>Enquiry</caption>
                    <tr>
                        <td>Channel</td>
                        <td >
                            <el-form-item prop="paramChannel">
                                <el-select v-model="queryForm.paramChannel" clearable>
                                    <el-option v-for="item in paramChannels" :label="item.label" :value="item.value" :key="item.value">

                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </td>	
                        <td>TBS A/C No.</td>
                        <td >
                            <el-form-item prop="paramCode">
                                <el-input v-model="queryForm.paramCode"></el-input>
                            </el-form-item>
                        </td>					
                    </tr>
                </table>
            </el-form>
        </div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="query()">Search</el-button>
        </div>
    </div>
</template>
<script>
 import ghbIcon from '@src/components/icon'
    export default {
        name:'queryHead',
        components:{
            ghbIcon
        },
        props:[],
        mounted(){
            //
        },
        data(){
            return{
                paramChannels:[
                    {label:'Phone Bank',value:'CPB'},
                    {label:'Enterprise online banking',value:'CCB'},
                ],
                queryForm:{
                    paramChannel:'',paramCode:'',bsnCode:'IM0201'
                },
                rules:{
                    authUserNo: [{required: true, message: 'required', trigger: 'blur' }],
                },
            }
        },
        methods:{
            
            query(){//返回到查询页面
                this.$emit('query',this.queryForm)
            }
        }
    }
</script>